<script setup lang="ts">
import { ref } from 'vue';
import Edit from '../edit/index.vue';
import Record from '../record/index.vue';
import QR from '../qr/index.vue';
const tabValue = ref('edit');
const tabs = {
  edit: Edit,
  record: Record,
  qr: QR,
};
</script>
<template>
  <view class="car-apply app-page--1">
    <app-navbar title="用车申请" />
    <nut-tabs v-model="tabValue" class="car-apply__tabs">
      <nut-tab-pane title="发起申请" pane-key="edit" />
      <nut-tab-pane title="申请记录" pane-key="record" />
      <nut-tab-pane title="用车码" pane-key="qr" />
    </nut-tabs>
    <component :is="tabs[tabValue]" :key="tabValue"> </component>
  </view>
</template>
<style lang="scss">
.car-apply {
  &__wrapper {
    margin: 20px 20px 80px;
    background-color: #fff;
    border-radius: 16px;
  }
  &__tabs {
    //去掉tabs多余留白
    .nut-tabs {
      &__content {
        display: none;
      }
    }
  }
}
</style>
